<template>
	<view class="safe-center">
		<navigator url="settingMoneyPwd" class="nav">
			<view class="item">
				<view class="lb">{{i18n.fundPass}}</view>
				<view>
					<text v-if="userInfo.payment_password">{{i18n.modify}}</text>
					<text v-else>{{i18n.setting}}</text>
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
		</navigator>
		<navigator url="settingLoginPwd" class="nav">
			<view class="item">
				<view class="lb">{{i18n.loginPass}}</view>
				<view>
					<text>{{i18n.modify}}</text>
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
		</navigator>
		<navigator url="bindMobile" class="nav">
			<view class="item">
				<view class="lb">{{i18n.bindPhone}}</view>
				<view>
					<text>{{ phoneStatus }}</text>
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
		</navigator>
		<navigator url="bindEmail" class="nav">
			<view class="item">
				<view class="lb">{{i18n.bindEmail}}</view>
				<view>
					<text>{{ emailStatus }}</text>
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
		</navigator>		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				userInfo: {}
			}
		},
		computed:{
			i18n() {
				return this.$t('safe');
			},
			phoneStatus(){
				const { mobile_open, mobile  } = this.userInfo
				if(!mobile_open && !mobile){
					return this.$t('safe.goBind')
				}
				if(mobile_open){
					return this.$t('safe.goOpen')
				} else {
					return this.$t('safe.goClose')
				}
			},
			emailStatus(){
				const { email_open, email } = this.userInfo
				if(!email_open && !email){
					return this.$t('safe.goBind')
				}
				if(email_open){
					return this.$t('safe.goOpen')
				} else {
					return this.$t('safe.goClose')
				}
			},
			googleStatus(){
				const { ga_bind, ga_open } = this.userInfo
				if(!ga_open && !ga_bind){
					return this.$t('safe.goBind')
				}
				if(ga_open){
					return this.$t('safe.goOpen')
				} else {
					return this.$t('safe.goClose')
				}
			},
			googleNav(){
				const { ga_bind, ga_open } = this.userInfo
				if(!ga_open && !ga_bind){
					return 'googleCode'
				} else {
					return 'switchGoogle'
				}
			}
		},
		onShow(){
			this.fetchUserInfo()
			uni.setNavigationBarTitle({
			 title: this.$t('safe.securityCenter')
			})
		},
		methods: {
			fetchUserInfo() {
				let userInfo = this.$getStore('ucenterInfo', true)
				this.userInfo = userInfo
				this.$post('api/ucenter/info')
					.then(res => {
						let userInfo = res.data
						this.userInfo = userInfo
						this.$setStore('ucenterInfo', userInfo, true)
						if (userInfo.mobile_open) {
							this.checked = true
						}
					})
			},
		}
	}
</script>

<style lang="less" scoped="">
	text {
		font-size: 28upx;
	}
	.safe-center {
		padding-top: 20upx;
		.nav {
			padding: 0 30upx;
			line-height: 100upx;
			color: var(--txt-color);
			.lb {
				//font-weight: bold;
				font-size: 28upx;
			}

			.iconfont {
				margin-left: 20upx;
			}
		}
		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid var(--border);
		}
	}
</style>
